<template>
  <div class="search">
    <el-form inline>
      <el-form-item v-for="(item, index) in searchItem" :key="index" :label="item.label">
        <el-input
          v-if="item.type==='input'"
          :placeholder="item.placeholder"
          v-model="item.value"
        ></el-input>
        <el-select
          v-else-if="item.type==='select'"
          v-model="item.value"
          :placeholder="item.placeholder"
        >
          <el-option
            v-for="(optionItem, optionIndex) in item.option"
            :key="optionIndex"
            :label="optionItem.label"
            :value="optionItem.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-else-if="item.type==='date'"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" size="small">查询</el-button>
        <el-button class="btn" type="warning" size="small">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'search',
  props: {
    searchItem: {
      type: Array
    }
  }
}
</script>

<style scoped lang="less">
.search {
  background: #fff;
  padding: 20px 30px 0;
  margin-bottom: 10px;
}
.btn {
  padding: 10px 30px;
}
</style>
